
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
  <script src="layui/layui.js"></script>
</head>
<body>

<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">游戏名称</label>
    <div class="layui-input-inline">
      <input type="text" name="heroName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-inline">
      <select name="campId" id="campId" lay-filter="aihao">
        <option value="">请选择</option>
      </select>
    </div>
  </div>
 
 
  <div class="layui-inline">
    <label class="layui-form-label">游戏时间</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" id="start" name="start" placeholder="开始时间" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" id="end" name="end" placeholder="结束时间" autocomplete="off" class="layui-input">
    </div>
  </div>

  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

<script>
layui.use(['form','jquery','table'], function(){
  var form = layui.form;
  var $ = layui.jquery;
  var table = layui.table;
  //动态下拉框
  $.post(
	 "camp/findAll.do",
	 function(res){
		 //获取下拉框对象
		 var select = $("#campId");
		 //循环创建option
		 for(var i=0;i<res.length;i++){
			 //创建option
			 var option='<option value="'+res[i].campId+'">'+res[i].campName+'</option>';
			 //在select中添加option
			 select.append(option);
		 }
		 //刷新select选择框渲染
		 form.render('select');
	 },"json"
  );
  
  //各种基于事件的操作，下面会有进一步介绍
  form.on('submit(*)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  
	  //表格重载
	  table.reload('demo', {
     where:data.field//设定异步数据接口的额外参数
  //,height: 300
     });
	  
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
});
</script>
 
<table id="demo" lay-filter="test"></table>
 

<script>
layui.use(['form','jquery','table'], function(){
	var form = layui.form;
	  var $ = layui.jquery;
	  var table = layui.table;
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: 'heroinfo/findAll.do' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'heroId', title: 'ID'}
      ,{field: 'heroName', title: '游戏名称'}
      ,{field: 'gameDate', title: '时间'}
      ,{field: 'score', title: '分数'} 
      ,{field: 'campName', title: '类型'}
      ,{fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
      
    ]]
  });
//监听工具条 
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
      //do somehing
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
      //do something
      //表单回显
      form.val('edit',data);
      //弹出层
      layer.open({
       type: 1,
       content: $('#edit') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
      });
      
      //同步更新缓存对应的值
      obj.update({
        username: '123'
        ,title: 'xxx'
      });
    } else if(layEvent === 'LAYTABLE_TIPS'){
      layer.alert('Hi，头部工具栏扩展的右侧图标。');
    }
  });
});
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
</body>
</script>
</body>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#start' //指定元素
  });
  
  //执行一个laydate实例
  laydate.render({
    elem: '#end' //指定元素
  });
});
</script>
</html>

<form class="layui-form" id="edit" style="display:none" lay-filter="edit"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-inline">
      <input type="text" name="heroId" disabled="disabled" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">游戏名称</label>
    <div class="layui-input-inline">
      <input type="text" name="heroName"  placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">时间</label>
    <div class="layui-input-inline">
      <input type="text" name="gameDate" id="b" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">分数</label>
    <div class="layui-input-inline">
      <input type="text" name="score" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-inline">
      <select name="campId" id="campId2" lay-filter="aihao">
        <option value="">请选择</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

<script>
layui.use(['form','jquery','table'], function(){
  var form = layui.form;
  var $ = layui.jquery;
  var table = layui.table;
  //动态下拉框
  $.post(
	 "camp/findAll.do",
	 function(res){
		 //获取下拉框对象
		 var select = $("#campId2");
		 //循环创建option
		 for(var i=0;i<res.length;i++){
			 //创建option
			 var option='<option value="'+res[i].campId+'">'+res[i].campName+'</option>';
			 //在select中添加option
			 select.append(option);
		 }
		 //刷新select选择框渲染
		 form.render('select');
	 },"json"
  );
  
  //各种基于事件的操作，下面会有进一步介绍
  form.on('submit(edit)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  
	  //提交后台
	  $.post(
		"heroinfo/edit.do",
		data.field,
		function(res){
			layer.msg("操作成功");
			//刷新浏览器
			location.reload();
		}
	  );
	  
	  
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
});
</script>

<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#b' //指定元素
  });
});
</script>